<template>
  <div class="deliver_search">
    <!-- 出库列表条件搜索表单 -->
    <el-form :model="deliver">
      <el-row class="search_condition_row1">
        <!-- 第三方 -->
        <el-col :span="6">
          <el-select clearable placeholder="请选择第三方" v-model="deliver.thirdParty">
              <el-option
                v-for="item in thirdPartDownBox"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
        </el-col>
        <!-- 下单人 -->
        <el-col :span="5">
          <el-select clearable placeholder="请选择下单人" v-model="deliver.orderBy">
              <el-option
                v-for="item in employeeDownBox"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row class="search_condition_row2">
        <!-- 下单时间 -->
        <el-col :span="6">
          <el-date-picker
            v-model="deliver.orderTime"
            align="center"
            type="date"
            placeholder="请选择下单时间"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-col>
        <!-- 订单状态 -->
        <el-col :span="5">
          <el-select clearable placeholder="请选择订单状态" v-model="deliver.state">
              <el-option key="待审核" label="待审核" value="待审核"></el-option>
              <el-option key="已通过" label="已通过" value="已通过"></el-option>
              <el-option key="已拒绝" label="已拒绝" value="已拒绝"></el-option>
          </el-select>
        </el-col>
        <!-- 搜索出库订单按钮 -->
        <el-col :span="5">
          <el-button type="primary" icon="el-icon-search" @click="searchThirdPart">搜索出库订单</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'deliverSearch',
    data() {
      return {
        /* 出库列表信息 */
        deliver: {
          orderTime: '',
          orderBy: '',
          state: '',
          thirdParty: '',
        },
        /* 下单人下拉框 */
        employeeDownBox: [],
        /* 第三方下拉框 */
        thirdPartDownBox: [],
        /* 日期选择快捷键 */
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      }
    },
    methods: {
      /* 搜索采购订单事件 */
      searchThirdPart() {
        this.$bus.$emit('getDeliverPageList',this.deliver)
        this.$bus.$emit('getDeliverTotal')
      },
      /* 获得下单人下拉框数据 */
      async getEmployeeData() {
        const { data: res } = await this.$http.get('settings/employee/getEmployeeData.do')
        if (res.code == '1') {
          this.employeeDownBox = res.others
        } else {
            console.log('获取药品类别下拉框数据失败!')
        }
      },
      /* 获得第三方下拉框数据 */
      async getThirdPartData() {
        const { data: res } = await this.$http.get('workbench/thirdPart/getThirdPartData.do')
        if (res.code == '1') {
          this.thirdPartDownBox = res.others
        } else {
            console.log('获取药品类别下拉框数据失败!')
        }
      },
    },
    created() {
      this.getEmployeeData()
      this.getThirdPartData()
    }
  }

</script>

<style scoped>
  /* 搜索出库列表表单 */
  .el-form {
    padding: 20px 20px;
  }

  .search_condition_row1 {
    margin-bottom: 20px;
  }

  .search_condition_row2 {
    margin-bottom: 20px;
  }

  .el-input {
    width: 270px;
  }
</style>